<template>
    <div class="order">
        <van-nav-bar title="订单管理" @click-right="onClickRight">
            <template #right>
                <van-icon name="service-o" size="18" color="#5a5a5a" />
            </template>
        </van-nav-bar>

        <!-- 订单状态选项卡 -->
        <div class="status-box">
            <div @click="clickTab(index)" :class="[index == activeIndex ? 'active' : '']" v-for="(item, index) in titleData" class="status">{{ item.title }}</div>
        </div>
        <!-- 订单内容 -->
        <!-- 进行中 -->
        <div class="order-box" v-show="tab == 0">
            <van-empty description="暂无订单,快去喝一杯吧" v-if="newstOrderData.length == 0" />
            <div class="orderDetail" v-else>
                <p class="tips" v-if="isLogin == 'false'">暂无订单</p>
                <div class="tools" v-if="newstOrderData !== '' && isLogin == 'true'">
                    <div class="ordertop">
                        <div class="store">蜜恋工坊旗杆店 ></div>
                        <div class="orderstatus" @click="changeOrderStatus">确认收货</div>
                        <!-- <van-icon name="delete" class="delete" color="#5a5a5a" /> -->
                    </div>
                    <!-- 循环体 -->
                    <div class="order-item">
                        <div class="img-box" v-for="(item, index) in newstOrderData" :key="index">
                            <img :src="item.Img" class="auto-img" />
                        </div>
                    </div>
                    <div class="orderbottom">
                        <div class="time">
                            {{ newstOrderData[0].currentTime }}
                        </div>
                        <div class="totalcount">共{{ newstOrderData[0].totalcount }}件</div>
                        <div class="totalprice">总金额:&yen;{{ newstOrderData[0].totalPrice }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 历史订单 -->
        <div class="order-box" v-show="tab == 1">
            <van-empty description="暂无订单,快去喝一杯吧" v-if="newstOrderData !== ''" />
            <div class="orderDetail" v-else>
                <!-- <div class="tools" v-if="(OrderStatus == 'false')"> -->
                <div class="tools" v-if="newstOrderData == ''">
                    <div class="ordertop">
                        <div class="store">蜜恋工坊旗杆店 ></div>
                        <div class="orderstatus">已完成</div>
                        <van-icon name="delete" class="delete" color="#5a5a5a" @click="removeitem()" />
                    </div>
                    <!-- 循环体 -->
                    <div class="order-item">
                        <div class="img-box" v-for="(item, index) in orderDataed" :key="index">
                            <img :src="item.Img" class="auto-img" />
                        </div>
                    </div>
                    <div class="orderbottom">
                        <div class="time">
                            {{ orderDataed[0].currentTime }}
                        </div>
                        <div class="totalcount">共{{ orderDataed[0].totalcount }}件</div>
                        <div class="totalprice">总金额:&yen;{{ orderDataed[0].totalPrice }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 退款订单 -->
        <div class="order-box" v-show="tab == 2">
            <van-empty description="暂无数据" v-if="refundOrder.length == 0" />
        </div>
    </div>
</template>

<script>
import { Toast } from "vant";
import navback from "../components/Navback.vue";
export default {
    name: "Order",
    data() {
        return {
            orderData: "",
            newOrderData: [],
            // 再次存入的数据(进行中)
            newstOrderData: "",
            // 存入历史订单数据
            orderDataed: "",
            // 退款订单
            refundOrder: "",
            // 订单状态标识符
            OrderStatus: 1,
            isLogin: "",
            titleData: [
                {
                    title: "进行中",
                },
                {
                    title: "历史",
                },
                {
                    title: "退款",
                },
            ],
            activeIndex: 0,
            tab: 0,
        };
    },
    components: {},
    methods: {
        onClickRight() {
            Toast("按钮");
        },

        clickTab(index) {
            if (this.activeIndex === index) {
                return;
            }
            this.activeIndex = index;
            this.tab = index;
        },
        changeOrderStatus() {
            this.newstOrderData = "";
            localStorage.removeItem("carlisting");
            // 存入一个订单状态标识符
            // localStorage.setItem("OrderStatus", "true");
            // 修改订单状态标识符
            // localStorage.setItem("OrderStatus", "false");
            // 清除进行中数据
            // localStorage.removeItem("carlisting")
            Toast("收货成功");
            console.log(this.newstOrderData);
        },
        // 删除历史订单
        removeitem() {
            // localStorage.removeItem("carlisted")
            console.log(this.orderDataed);
            // this.orderDataed = ''
            // this.OrderStatus = 2
            this.newstOrderData = [];
            Toast("删除成功");
        },
    },

    created() {
        // this.orderDataed = ''
        console.log(JSON.parse(localStorage.getItem("Carlist")));
        //   获取订单数据
        if (JSON.parse(localStorage.getItem("Carlist")) == undefined) {
            console.log(1111);
            console.log(JSON.parse(localStorage.getItem("Carlist")));
            return;
        } else {
            this.orderData = JSON.parse(localStorage.getItem("Carlist"));
            console.log(this.orderData);

            // 处理数据
            this.orderData.forEach((item) => {
                // console.log(item);
                this.newOrderData.push(item[0]);
                // 重新传入订单数据,防止订单数据消失,订单也消失
                localStorage.setItem("carlisting", JSON.stringify(this.newOrderData));
            });
            console.log(this.newOrderData);
        }

        // 获取订单状态标识符
        this.OrderStatus = localStorage.getItem("OrderStatus");
        console.log(this.OrderStatus);
        // console.log(JSON.parse(localStorage.getItem("carlisting")));
        // 再次获取进行中数据
        if (JSON.parse(localStorage.getItem("carlisting")) == undefined) {
            console.log(2222);
            return;
        } else {
            console.log(JSON.parse(localStorage.getItem("carlisting")));
            this.newstOrderData = JSON.parse(localStorage.getItem("carlisting"));
            console.log(this.newstOrderData);
            // 将进行中数据传入,防止进行中数据与历史数据相连
            localStorage.setItem("carlisted", JSON.stringify(this.newstOrderData));
        }

        // 获取历史订单数据
        console.log(JSON.parse(localStorage.getItem("carlisted")));
        if (JSON.parse(localStorage.getItem("carlisted")) == undefined) {
            return;
        } else {
            this.orderDataed = JSON.parse(localStorage.getItem("carlisted"));
        }

        // 获取登录状态
        this.isLogin = localStorage.getItem("isLogin");
        console.log(this.isLogin);
    },
    // mounted(){
    //     // this.changeOrderStatus()
    // },
};
</script>

<style lang="less" scoped>
.order {
    height: 617px;

    /deep/ .van-nav-bar__title {
        color: #656565;
        font-size: 18px;
    }
    .order-box {
        width: 100%;
        height: 518px;
        background-color: #f5f5f5;
        padding-top: 10px;
        .orderDetail {
            width: 350px;
            height: 135px;
            background-color: #fff;
            border-radius: 10px;
            margin: 0 auto;
            .tips {
                font-size: 16px;
                font-weight: 700;
                margin: 0px 0 0 143px;
                padding: 55px 0 0 0;
            }
            .tools {
                width: 350px;
                height: 135px;
                background-color: #fff;
                border-radius: 10px;
                margin: 0 auto;
                .ordertop {
                    display: flex;
                    .store {
                        width: 190px;
                        margin: 10px 70px 0 10px;
                        font-weight: bold;
                        font-size: 14px;
                    }
                    .orderstatus {
                        margin-top: 10px;
                        font-size: 14px;
                        color: #bdb6b6;
                        font-weight: 700;
                    }
                    .delete {
                        margin: 10px 0 0 10px;
                        font-size: 16px;
                    }
                }
                .order-item {
                    width: 350px;
                    height: auto;
                    display: flex;
                    .img-box {
                        width: 80px;
                        height: 80px;
                        margin-right: 5px;
                        .auto-img {
                            width: 100%;
                            display: block;
                        }
                    }
                }
                .orderbottom {
                    width: 350px;
                    height: 30px;
                    display: flex;
                    margin: 0 0 0 10px;
                    line-height: 30px;
                    justify-content: space-between;
                    .totalcount {
                        margin: 0 0 0 10px;
                    }
                    .totalprice {
                        margin: 0 60px 0 0;
                        font-weight: 550;
                    }
                    .time {
                        width: 123px;
                    }
                }
            }
        }
    }
    .status-box {
        width: 100%;
        display: flex;
        justify-content: space-around;
        .status {
            width: 33.333%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            color: #8f8f8f;
            font-weight: 700;
        }
        .active {
            color: black;
            border-bottom: 2px solid #e4393c;
        }
    }
}
</style>
